import React, { Component, Fragment } from 'react';
import './data-config.css';
import { Form, Input, Menu, Tag, Button, Row, Col, InputNumber, Select, message, Collapse, Tabs } from 'antd';
import { proMenuList } from '../../config/proMenuList.js';
import { connect } from 'react-redux';
import { addYxDataInfo, replaceNewCurves, isUpdatePages, getVideoDirection, replace_docdata_new_curves } from '../../redux/actions';
import { newCurves1 } from '../../config/daosList';
import { reqAllYxTypes, reqCurvesTranslation, reqCurvesFilter, reqCurvesPull } from '../../api';
import OpenSmallWindow from '../Modal/open-small-window';
import ConcatCurveForm from './concat-curve-form';
import downIcon from '../../assets/image/down.png'
import White from '../../assets/image/yxType/空白.png';

import YX01 from '../../assets/image/yxType/白云岩.png';
import YX02 from '../../assets/image/yxType/粗砂岩.png';
import YX03 from '../../assets/image/yxType/粉砂岩.png';
import YX04 from '../../assets/image/yxType/钙质砂岩.png';
import YX05 from '../../assets/image/yxType/钙质页岩.png';  //
import YX06 from '../../assets/image/yxType/钙质粘土.png';
import YX07 from '../../assets/image/yxType/黄土.png';
import YX08 from '../../assets/image/yxType/灰岩.png';
import YX09 from '../../assets/image/yxType/角砾岩.png';
import YX10 from '../../assets/image/yxType/中砂岩.png';


import YX11 from '../../assets/image/yxType/砾岩.png'; //
import YX12 from '../../assets/image/yxType/煤.png';
import YX13 from '../../assets/image/yxType/泥灰岩.png';
import YX14 from '../../assets/image/yxType/泥质白云岩.png'; //
import YX15 from '../../assets/image/yxType/泥质粉砂岩.png';
import YX16 from '../../assets/image/yxType/泥质灰岩.png';
import YX17 from '../../assets/image/yxType/泥质砂岩.png';
import YX18 from '../../assets/image/yxType/凝灰质砂岩.png';
import YX19 from '../../assets/image/yxType/砂砾石.png';
import YX20 from '../../assets/image/yxType/砾石.png'; //

import YX21 from '../../assets/image/yxType/砂质泥灰岩.png';
import YX22 from '../../assets/image/yxType/砂质页岩.png';
import YX23 from '../../assets/image/yxType/碳质灰岩.png';
import YX24 from '../../assets/image/yxType/碳质页岩.png';
import YX25 from '../../assets/image/yxType/碳质粘土.png';
import YX26 from '../../assets/image/yxType/填筑土.png';
import YX27 from '../../assets/image/yxType/细砂岩.png';
import YX28 from '../../assets/image/yxType/页岩.png';
import YX29 from '../../assets/image/yxType/粘土.png';
import YX30 from '../../assets/image/yxType/粘土岩(泥质).png';

const { SubMenu } = Menu;
const { Option } = Select;
const { TabPane } = Tabs;
const { Panel } = Collapse;
const weight = [{
  weight_id: "StrongWeight",
  weight_name: "强权重"
}, {
  weight_id: "MediumWeight",
  weight_name: "中权重"
}, {
  weight_id: "WeakWeight",
  weight_name: "弱权重"
}, {
  weight_id: "AverageWeight",
  weight_name: "均值"
},]


class DataConfig extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgurl: White,
      yxTypeList: [],
      videoList: [{
        video_id: "sguxguh1",
        video_name: "视频1"
      }, {
        video_id: "sguxguh2",
        video_name: "视频2"
      }, {
        video_id: "sguxguh3",
        video_name: "视频3"
      }, {
        video_id: "sguxguh4",
        video_name: "视频4"
      },],
      videoId: '',  // 当前选中的视频id
      visible: '0',
    }
  }
  changeSubMenu_1 = (status) => {
    this.setState({ subMenu_1: !status })
  }
  changeSubMenu_2 = (status) => {
    this.setState({ subMenu_2: !status })
  }
  changeSubMenu_3 = (status) => {
    this.setState({ subMenu_3: !status })
  }
  proMenuListShow = (proMenuList) => {
    return proMenuList.map((item) => {  //item指的是标签数组项
      return (
        <SubMenu key={item.key} icon={item.icon} title={item.title}>
          {this.showAllItem(item.title)}
        </SubMenu>
      )
    })
  }
  proCollapseListShow = (proMenuList) => {
    return proMenuList.map((item, index) => {
      return (
        <Panel style={{ borderTop: index > 0 ? '1px solid rgba(0, 168, 246, 0.6)' : 0 }} header={<span>{item.icon}<span style={{ marginLeft: 10 }}>{item.title}</span></span>} key={index + 1}>
          {this.showAllItem(item.title)}
        </Panel>
      )
    })
  }
  getYxType = async () => {   // 获取所有岩性类型
    const result = await reqAllYxTypes();
    console.log("获取岩性列表", result)
    if (result.code === 200) {
      const yxTypeList = result.data;
      this.setState({
        yxTypeList
      })
    } else {
      message.error(result.data);
    }
  }
  // getAllVideo = async() => {   // 获取所有视频列表
  //   const result = await reqAllVideoList();
  //   if(result.code === 200){
  //     const videoList = result.data;
  //     this.setState({
  //       videoList
  //     })
  //   }else{
  //     message.error(result.data);
  //   }
  // }

  handleChange1 = (value) => {   // 更新岩性小图标，根据yx_id
    console.log("岩性编号", value);
    if (value === 'rock-1') { this.setState({ imgurl: YX01 }) }
    else if (value === 'rock-2') { this.setState({ imgurl: YX02 }) }
    else if (value === 'rock-3') { this.setState({ imgurl: YX03 }) }
    else if (value === 'rock-4') { this.setState({ imgurl: YX04 }) }
    else if (value === 'rock-5') { this.setState({ imgurl: YX05 }) }
    else if (value === 'rock-6') { this.setState({ imgurl: YX06 }) }
    else if (value === 'rock-7') { this.setState({ imgurl: YX07 }) }
    else if (value === 'rock-8') { this.setState({ imgurl: YX08 }) }
    else if (value === 'rock-9') { this.setState({ imgurl: YX09 }) }
    else if (value === 'rock-10') { this.setState({ imgurl: YX10 }) }

    else if (value === 'rock-11') { this.setState({ imgurl: YX11 }) }
    else if (value === 'rock-12') { this.setState({ imgurl: YX12 }) }
    else if (value === 'rock-13') { this.setState({ imgurl: YX13 }) }
    else if (value === 'rock-14') { this.setState({ imgurl: YX14 }) }
    else if (value === 'rock-15') { this.setState({ imgurl: YX15 }) }
    else if (value === 'rock-16') { this.setState({ imgurl: YX16 }) }
    else if (value === 'rock-17') { this.setState({ imgurl: YX17 }) }
    else if (value === 'rock-18') { this.setState({ imgurl: YX18 }) }
    else if (value === 'rock-19') { this.setState({ imgurl: YX19 }) }
    else if (value === 'rock-20') { this.setState({ imgurl: YX20 }) }

    else if (value === 'rock-21') { this.setState({ imgurl: YX21 }) }
    else if (value === 'rock-22') { this.setState({ imgurl: YX22 }) }
    else if (value === 'rock-23') { this.setState({ imgurl: YX23 }) }
    else if (value === 'rock-24') { this.setState({ imgurl: YX24 }) }
    else if (value === 'rock-25') { this.setState({ imgurl: YX25 }) }
    else if (value === 'rock-26') { this.setState({ imgurl: YX26 }) }
    else if (value === 'rock-27') { this.setState({ imgurl: YX27 }) }
    else if (value === 'rock-28') { this.setState({ imgurl: YX28 }) }
    else if (value === 'rock-29') { this.setState({ imgurl: YX29 }) }
    else if (value === 'rock-30') { this.setState({ imgurl: YX30 }) }

  }

  // handleChange2 = async(value) => {   // 选择视频，用 视频id 获取 视频url/视频柱状图src
  //   console.log("选择的视频",value);
  //   const videoId = value;
  //   this.setState({
  //     videoId
  //   })
  // }

  videoShow = (data) => {
    if (this.props.docData.doc_id) {
      this.props.getVideoDirection(data);  // 保存 视频同步方式
      this.setState({
        visible: '1'
      });
      window.localStorage.setItem("play_video", true)
    } else {
      alert("请先导入文件！");
    }
  }

  videoBarShow = () => {
    if (this.props.docData.doc_id) {
      this.setState({ visible: '2' });
    } else {
      alert("请先导入文件！");
    }
  }

  handleCancel = () => {
    this.setState({
      visible: '0'
    })
    window.localStorage.removeItem("play_video")
  }


  onFinish1 = async (values) => {
    // 提交表单，获取平移后的曲线 并 更新
    if (!values.move_depth) {
      message.error("请输入数字！")
    } else {
      if (this.props.docData.doc_id) {
        const docId = this.props.docData.doc_id;
        const docType = this.props.docData.doc_type;
        let docData = {}

        // console.log(this.props.docData)
        //处理不同的文件，将docData拿出来

        if (docType == "纯数据文件") {
          docData = this.props.docData
        } else if (docType == "绘图文件") {
          docData = this.props.docData.docData
        }
        // var curves = this.props.selectedCurves;   // 需要平移的曲线集合 ??？？？？ 这里不实时更新；
        let curves = [];
        docData.curves.map(item => {
          this.props.selectedCurves && this.props.selectedCurves.map(el => {
            if (el.curve_id == item.curve_id) {
              curves.push({ 'curve_id': item.curve_id, 'title': item.curve_name, 'type': item.type, 'xData': item.xData });
            }
          })
        })
        var yData = docData.yData;
        const depthMove = values.move_depth;
        // console.log("onFinish2平移",curves,docData,docData.yData,depthMove);    // 在docData中将曲线找出，docId和docType不用先留着
        // console.log("平移前曲线",curves);
        const result = await reqCurvesTranslation(curves, yData, depthMove);  // 获取平移后的曲线
        if (result.code === 200) {
          // console.log("平移结果",result.data[0].xData);
          this.props.replaceNewCurves(result.data);   // 更新处理后的曲线（daosDataList）
          this.props.replace_docdata_new_curves(result.data, docType)
          message.success("平移成功")
        } else {
          message.error(result.data);
        }
      } else {
        message.error("请先导入文件！");
      }
    }

  };

  onFinish2 = async (values) => {   // 提交表单 ：滤波   
    console.log(values)
    if (!values.start_depth || !values.end_depth) {
      message.error("请保证起始和终止深度为数字！")
    } else {
      if (this.props.docData.doc_id) {
        const docId = this.props.docData.doc_id;
        const docType = this.props.docData.doc_type;
        let docData = {}

        //处理不同的文件，将docData拿出来
        if (docType == "纯数据文件") {
          docData = this.props.docData
        } else if (docType == "绘图文件") {
          docData = this.props.docData.docData
        }
        if (Number(values.start_depth) < docData.start_depth || Number(values.end_depth) > docData.end_depth) {
          message.info("您的输入超出深度范围，请重新输入")
        } else if (Number(values.start_depth) > Number(values.end_depth)) {
          // console.log(typeof(docData.start_depth),values.start_depth>values.end_depth)
          message.info("起始深度应小于终止深度，请重新输入")
        } else {
          // var curves = this.props.selectedCurves;   // 需要平移的曲线集合
          let curves = [];
          docData.curves.map(item => {
            this.props.selectedCurves && this.props.selectedCurves.map(el => {
              if (el.curve_id == item.curve_id) {
                curves.push({ 'curve_id': item.curve_id, 'title': item.curve_name, 'type': item.type, 'xData': item.xData });
              }
            })
          })
          var yData = docData.yData;
          const depthStart = Number(values.start_depth);
          const depthEnd = Number(values.end_depth);
          const weight = values.weight_id;
          // console.log("onFinish3滤波",curves,yData,depthStart,depthEnd,weight);
          const result = await reqCurvesFilter(curves, yData, depthStart, depthEnd, weight);   // 获取滤波后的曲线
          if (result.code === 200) {
            // console.log("滤波结果",result.data);
            this.props.replaceNewCurves(result.data);      //   更新曲线
            this.props.replace_docdata_new_curves(result.data, docType)
            message.success("滤波成功")
          } else {
            message.error(result.data);
          }
        }
      } else {
        message.error("请先导入文件！");
      }
    }
  };

  onFinish3 = values => {   // 提交表单
    if (this.props.docData.doc_id) {
      const doc_id = this.props.docData.doc_id;
      const curves = this.props.selectedCurves;
      const start_depth = Number(values.start_depth);
      const end_depth = Number(values.end_depth);
      // console.log("onFinish4拉伸",doc_id,curves,start_depth,end_depth);
      const result = reqCurvesPull(doc_id, curves, start_depth, end_depth);  // 获取拉伸后的曲线
      if (result.code === 200) {
        const newCurves = newCurves1;   // result.data
        console.log("拉伸结果", result);
        this.props.replaceNewCurves(newCurves.curves);
      } else {
        message.error("获取失败！");
      }
    } else {
      message.error("请先导入文件！");
    }
  };

  onFinish4 = values => {   // 提交表单
    if (this.props.docData.doc_id) {
      const doc_id = this.props.docData.doc_id;
      const curves = this.props.selectedCurves;
      const start_depth = Number(values.start_depth);
      const end_depth = Number(values.end_depth);
      console.log("onFinish4压缩", doc_id, curves, start_depth, end_depth);
      //const result = await reqCurvesCompress(doc_id,curves,start_depth,end_depth);  // 获取压缩后的曲线
      // if(result.code === 200){
      const newCurves = newCurves1;   // result.data
      console.log("压缩结果", newCurves.curves);
      this.props.replaceNewCurves(newCurves.curves);
      // }else{
      //   message.error("获取失败！");
      // }  
    } else {
      message.error("请先导入文件！");
    }
  };

  onFinish5 = values => {   // 提交表单
    const data = {
      start_depth: Number(values.start_depth),
      end_depth: Number(values.end_depth),
      yx_id: values.yx_id
    }

    let docData = {}
    if (this.props.docData.doc_type == "绘图文件") {
      docData = this.props.docData.docData;
    } else if (this.props.docData.doc_type == "纯数据文件") {
      docData = this.props.docData;
    }
    console.log("onFinish5岩性", data, docData);
    if (docData.doc_id) {   // 有文件才能写入
      if (Number(values.start_depth) < docData.start_depth || Number(values.end_depth) > docData.end_depth) {
        message.info("您的输入超出深度范围，请重新输入")
      } else if (Number(values.start_depth) > Number(values.end_depth)) {
        // console.log(typeof(docData.start_depth),values.start_depth>values.end_depth)
        message.info("起始深度应小于终止深度，请重新输入")
      } else {
        this.props.addYxDataInfo(data);   // 将岩性数据添加到 当前模板数据中reducer
        this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(岩性页面)   
      }

    } else {
      message.error("请先导入文件！");
    }
  };


  showAllItem = (title) => {    // 每个处理模块对应的 属性设置
    if (title === '数据处理') {  //className='pre-process-sider-up'
      return (
        <Fragment>
          <Tabs defaultActiveKey="1" className='data-config-collapse' centered tabBarGutter={0} size='small'>
            <TabPane tab="数据预处理" key="1">
              <Form
                name="control-ref"
                onFinish={this.onFinish1}
              >
                <Row>

                  <Col style={{ width: 70, lineHeight: '32px' }}>平 移(米)：</Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="move_depth"
                    // rules={[{
                    //   required: true,

                    //   pattern: /^(-?\d+)(\.\d+)?$/,  // pattern正则表达式匹配
                    //   message: '请输入数字',  //请输入数字
                    // }]}    
                    >
                      <InputNumber style={{ width: 112 }} defaultValue={0} className="data-pre-process-input" />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item>
                      <Button className="data-pre-process-button" type="primary" htmlType="submit">
                        确定
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>

              <Form
                name="control-ref"
                onFinish={this.onFinish2}
              >
                <Row>
                  <Col style={{ width: 70, lineHeight: '32px' }}>滤 波(米)：</Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="start_depth"
                    // rules={[{
                    //   pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                    //   message: ' ',
                    // }]}
                    >
                      <InputNumber style={{ width: 87 }} className="data-pre-process-input" />
                    </Form.Item>
                  </Col>
                  <Col><span style={{ lineHeight: '32px' }}>—</span></Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="end_depth"
                    // rules={[{
                    //   pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                    //   message: ' ',
                    // }]}
                    >
                      <InputNumber style={{ width: 87 }} className="data-pre-process-input" />
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col style={{ width: 70, lineHeight: '32px' }}>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;：</Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="weight_id"
                      rules={[{ required: true, message: " " }]}
                    >
                      <Select
                        placeholder="请选择"
                        style={{ width: 112 }}
                        getPopupContainer={triggerNode => triggerNode.parentNode}   // 相对于 父元素固定，不随意滚动位置
                      >
                        {
                          weight.map((item) => {
                            return <Option value={item.weight_id}>{item.weight_name}</Option>
                          })
                        }
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item>
                      <Button className="data-pre-process-button" type="primary" htmlType="submit">
                        确定
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </TabPane>
            <TabPane tab="拼接" key="2">
              <ConcatCurveForm />
            </TabPane>
            <TabPane tab="岩性分层管理" key="3">
              <Form
                name="control-ref"
                onFinish={this.onFinish5}

              >
                <Row>

                  <Col style={{ width: 70, lineHeight: '32px' }}>深 度(米)：</Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="start_depth"
                      rules={[
                        { required: true, message: ' ' },
                        { required: true, pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g, message: ' ' }  // pattern正则表达式匹配  
                      ]}
                    >
                      <Input style={{ width: 87 }} className="data-pre-process-input" />
                    </Form.Item>
                  </Col>
                  <Col><span style={{ lineHeight: '32px' }}>—</span></Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="end_depth"
                      rules={[
                        { required: true, message: ' ' },
                        { required: true, pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g, message: ' ' }  // pattern正则表达式匹配  
                      ]}
                    >
                      <Input style={{ width: 87 }} className="data-pre-process-input" />
                    </Form.Item>
                  </Col>
                </Row>
                <Row style={{ marginBottom: 10, height: 35 }}>

                  <Col>
                    <div style={{ width: 60, marginRight: 10, height: 32, marginTop: 0, borderStyle: 'solid', borderColor: 'rgb(240,242,245)', borderWidth: 1 }}>
                      {/* {console.log(this.state.imgurl)} */}
                      <img id="photpImg" src={this.state.imgurl} style={{ width: '100%', height: '100%' }}></img>
                    </div>
                  </Col>
                  <Col>
                    <Form.Item
                      className="data-config-form"
                      name="yx_id"
                      rules={[{ required: true, message: "请选择岩性类型" }]}
                    >
                      <Select
                        //defaultValue={this.state.yxTypeList[0].rock_name}
                        placeholder="请选择"
                        style={{ width: 112 }}
                        onChange={this.handleChange1}
                        getPopupContainer={triggerNode => triggerNode.parentNode}   // 相对于 父元素固定，不随意滚动位置
                      >
                        {
                          this.state.yxTypeList.map((item) => {
                            return <Option value={item.rock_Id}>{item.rock_Name}</Option>
                          })
                        }
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item>
                      <Button className="data-pre-process-button" type="primary" htmlType="submit">
                        保存
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </TabPane>
          </Tabs>
          {/* <div className='pre-process-sider-up' >
            <Divider plain style={{ marginTop: 5 }} onClick={() => this.changeSubMenu_1(this.state.subMenu_1)}>
              数据预处理&nbsp;
              {this.state.subMenu_1 ? <UpOutlined /> : <DownOutlined />}
            </Divider>
            {
              this.state.subMenu_1 &&
              <div className='divider-div-border'>
                <Form
                  name="control-ref"
                  onFinish={this.onFinish1}
                >
                  <Row style={{ height: 32, marginBottom: 5 }}>
                    
                    <Col>平 移(米)：</Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="move_depth"
                      // rules={[{
                      //   required: true,

                      //   pattern: /^(-?\d+)(\.\d+)?$/,  // pattern正则表达式匹配
                      //   message: '请输入数字',  //请输入数字
                      // }]}    
                      >
                        <InputNumber defaultValue={0} className="data-pre-process-input" />
                      </Form.Item>
                    </Col>
                    <Col>
                      <Form.Item>
                        <Button className="data-pre-process-button" type="primary" htmlType="submit">
                          确定
                        </Button>
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>

                <Form
                  name="control-ref"
                  onFinish={this.onFinish2}
                >
                  <Row>
                    
                    <Col>滤 波(米)：</Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="start_depth"
                      // rules={[{
                      //   pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                      //   message: ' ',
                      // }]}
                      >
                        <InputNumber className="data-pre-process-input" />
                      </Form.Item>
                    </Col>
                    <Col><span>——</span></Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="end_depth"
                      // rules={[{
                      //   pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                      //   message: ' ',
                      // }]}
                      >
                        <InputNumber className="data-pre-process-input" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    
                    <Col>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;：</Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="weight_id"
                        rules={[{ required: true, message: " " }]}
                      >
                        <Select
                          placeholder="请选择"
                          style={{ width: 112 }}
                          getPopupContainer={triggerNode => triggerNode.parentNode}   // 相对于 父元素固定，不随意滚动位置
                        >
                          {
                            weight.map((item) => {
                              return <Option value={item.weight_id}>{item.weight_name}</Option>
                            })
                          }
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col>
                      <Form.Item>
                        <Button className="data-pre-process-button" type="primary" htmlType="submit">
                          确定
                        </Button>
                      </Form.Item>
                    </Col>
                  </Row>
                </Form>

                <Form
                name="control-ref" 
                onFinish={this.onFinish3}
              >
                <Row style={{marginBottom: 10}}>
                  
                  <Col>拉 伸(米)：</Col>
                  <Col>
                    <Form.Item 
                      className="data-config-form"  
                      name="start_depth"
                      rules={[{
                        pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                        message: ' ',
                      }]}
                    >
                      <Input className="data-pre-process-input" />
                    </Form.Item> 
                  </Col>
                  <Col>—</Col>
                  <Col>
                    <Form.Item 
                      className="data-config-form"
                      name="end_depth"   
                      rules={[{
                        pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                        message: ' ',
                      }]}
                    >
                      <Input className="data-pre-process-input" />
                    </Form.Item> 
                  </Col>
                  <Col>
                    <Form.Item>
                      <Button className="data-pre-process-button" type="primary" htmlType="submit">
                        确定
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form>  

                <Form
                name="control-ref" 
                onFinish={this.onFinish4}
              >
                <Row style={{marginBottom: 10}}>
                  
                  <Col>压 缩(米)：</Col>
                  <Col>
                    <Form.Item 
                      className="data-config-form"  
                      name="start_depth"
                      rules={[{
                        pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                        message: ' ',
                      }]}
                    >
                      <Input className="data-pre-process-input" />
                    </Form.Item> 
                  </Col>
                  <Col>—</Col>
                  <Col>
                    <Form.Item 
                      className="data-config-form"
                      name="end_depth"   
                      rules={[{
                        pattern: /^[0-9_]+$/,  // pattern正则表达式匹配
                        message: ' ',
                      }]}
                    >
                      <Input className="data-pre-process-input" />
                    </Form.Item> 
                  </Col>
                  <Col>
                    <Form.Item>
                      <Button className="data-pre-process-button" type="primary" htmlType="submit">
                        确定
                      </Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form> 

              </div>
            }

          </div> */}

          {/* <div className='pre-process-sider-down' >
            <Divider plain onClick={() => this.changeSubMenu_2(this.state.subMenu_2)} style={{ cursor: 'pointer' }}>
              拼接&nbsp;
              {this.state.subMenu_2 ? <UpOutlined /> : <DownOutlined />}
            </Divider>
            {
              this.state.subMenu_2 &&
              <div className="divider-div-border">
                <ConcatCurveForm />
              </div>
            }
          </div> */}


          {/* <div>
            <Form
              name="control-ref"
              onFinish={this.onFinish5}
              
            >
              <Divider plain onClick={() => this.changeSubMenu_3(this.state.subMenu_3)} style={{ cursor: 'pointer' }}>
                岩性分层管理&nbsp;
                {this.state.subMenu_3 ? <UpOutlined /> : <DownOutlined />}
              </Divider>
              {
                this.state.subMenu_3 &&
                <div className="divider-div-border" >
                  <Row>
                    
                    <Col>深 度(米)：</Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="start_depth"
                        rules={[
                          { required: true, message: ' ' },
                          { pattern: /^[0-9_]+$/, message: ' ' }  // pattern正则表达式匹配  
                        ]}
                      >
                        <Input className="data-pre-process-input" />
                      </Form.Item>
                    </Col>
                    <Col>—</Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="end_depth"
                        rules={[
                          { required: true, message: ' ' },
                          { pattern: /^[0-9_]+$/, message: ' ' }  // pattern正则表达式匹配  
                        ]}
                      >
                        <Input className="data-pre-process-input" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row style={{ marginBottom: 10, height: 35 }}>
                    
                    <Col>
                      <div style={{ width: 61, height: 35, marginTop: 1, borderStyle: 'solid', borderColor: 'rgb(240,242,245)', borderWidth: 1 }}>
                        {console.log(this.state.imgurl)}
                        <img id="photpImg" src={this.state.imgurl} style={{ width: '100%', height: '100%' }}></img>
                      </div>
                    </Col>
                    <Col>
                      <Form.Item
                        className="data-config-form"
                        name="yx_id"
                        rules={[{ required: true, message: "请选择岩性类型" }]}
                      >
                        <Select
                          //defaultValue={this.state.yxTypeList[0].rock_name}
                          placeholder="请选择"
                          style={{ width: 112 }}
                          onChange={this.handleChange1}
                          getPopupContainer={triggerNode => triggerNode.parentNode}   // 相对于 父元素固定，不随意滚动位置
                        >
                          {
                            this.state.yxTypeList.map((item) => {
                              return <Option value={item.rock_Id}>{item.rock_Name}</Option>
                            })
                          }
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col>
                      <Form.Item>
                        <Button className="data-pre-process-button" type="primary" htmlType="submit">
                          保存
                        </Button>
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              }
            </Form>
          </div> */}

        </Fragment>
      )
    }
    // else if(title === '智能分析'){
    //   return (
    //     <div>
    //       <Form  
    //         name="control-ref" 
    //         onFinish={this.onFinish7}
    //       > 
    //         <Divider plain>多钻孔智能分析</Divider> 
    //       </Form>

    //       <Form  
    //         name="control-ref" 
    //         onFinish={this.onFinish7}
    //       > 
    //         <Divider plain>多模态数据关联</Divider> 
    //       </Form>

    //       <Form  
    //         name="control-ref" 
    //         onFinish={this.onFinish7}
    //       > 
    //         <Divider plain>视频智能处理</Divider> 
    //       </Form> 
    //     </div>
    //   )
    // }
    else if (title === '视频播放') {
      return (
        <Form
          name="control-ref"
          onFinish={this.onFinish6}

        >
          {/* <div className="divider-div-border">
            </div> */}

          {/* <Row style={{marginBottom: 0}}>
                
                <Col><p style={{marginTop:6}}>选择视频：</p></Col>
                <Col span={16}>
                  <Form.Item 
                    className="data-config-form" 
                    name="video_file" 
                    rules={[{ required: true }]}
                  >
                    <Select 
                      // defaultValue="lucy" 
                      placeholder="请选择"
                      onChange={this.handleChange2} 
                      style={{width:'153px',height:'25px'}} 
                      getPopupContainer={triggerNode => triggerNode.parentNode}  // 相对于 父元素固定，不随意滚动位置
                    >
                      {
                        this.state.videoList.map((item) => {
                          return <Option value={item.video_id}>{item.video_name}</Option>
                        })
                      }
                    </Select>
                  </Form.Item> 
                </Col>
                
              </Row> */}

          <Row>
            {/* <Col></Col> */}
            <Col span={12} style={{ textAlign: 'center', height: 50, margin: '10px 0 0 0' }}>
              <Button className="data-pre-process-button2" type="primary" onClick={() => this.videoShow(true)}> 播放视频 </Button>
              {/* <Button className="data-pre-process-button2" type="primary"  style={{width: 70}} onClick={() => this.videoShow(false)}> 反向同步 </Button> */}
            </Col>
            <Col span={12} style={{ textAlign: 'center', height: 50, margin: '10px 0 0 0' }}>
              <Button className="data-pre-process-button2" type="primary" onClick={this.videoBarShow}> 柱状转换 </Button>
            </Col>
          </Row>
        </Form>
      )
    }
  }


  componentWillMount() {
    this.getYxType();  // 获取所有岩性类型
    // this.getAllVideo();  // 获取所有视频列表
  }
  render() {
    const { visible } = this.state;
    return (
      <div className="data-config-wrapper">
        <div className="show-select-line">
          <p className="select-line">曲线</p>
          <div className="select-box">
            {this.props.selectedCurves.map((item) => <Tag>{item.title}</Tag>)}
          </div>
        </div>

        <div className="data-process-form">
          {/* <Menu theme="white" mode="inline" defaultSelectedKeys={'/data pre-process'} style={{ width: 255, margin: '0 auto' }} className='menu'>
            {this.proMenuListShow(proMenuList)}
          </Menu> */}
          <Collapse ghost={true} expandIconPosition="right" defaultActiveKey={[]}
            expandIcon={({ isActive }) => <div><img src={downIcon} alt="" style={{ transform: isActive ? 'rotate(0deg)' : 'rotate(-180deg)', transition: 'transform 0.24s', display: 'block' }}></img></div>}
          >
            {this.proCollapseListShow(proMenuList)}
          </Collapse>
        </div>
        {visible === '1' ? <OpenSmallWindow
          visible={visible}
          onClose={this.handleCancel}
          title="视频播放"
          handleRemoveAuto={this.props.handleRemoveAuto}
          pageYOffset={this.props.pageYOffset}
        //videoId={this.state.videoId}
        /> : null}
        {visible === '2' ? <OpenSmallWindow
          visible={visible}
          onClose={this.handleCancel}
          title="视频柱状图"
        //videoId={this.state.videoId}
        /> : null}

      </div>
    )
  }
}

export default connect(
  state => ({ selectedCurves: state.selectedCurves, docData: state.docData, updatePages: state.updatePages }),
  { addYxDataInfo, replaceNewCurves, isUpdatePages, getVideoDirection, replace_docdata_new_curves }
)(DataConfig);
